<!-- 异常组件 license by http://eleadmin.com -->
<template>
  <div class="ele-exception ele-text-center">
    <div class="ele-exception-img ele-text-placeholder">
      <slot name="icon">
        <i :class="[icon, 'ele-exception-icon']"></i>
      </slot>
    </div>
    <div class="ele-exception-content ele-text-left">
      <h1 class="ele-text">{{ title }}</h1>
      <p class="ele-text-secondary">{{ description }}</p>
      <div>
        <slot name="extra" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'EleException',
    props: {
      // 标题
      title: String,
      // 描述
      description: String,
      // 图标
      icon: {
        type: String,
        default: 'el-icon-_printer-solid'
      }
    }
  };
</script>

<style lang="scss">
  .ele-exception {
    margin: 15px 0;

    .ele-exception-img,
    .ele-exception-content {
      margin: 15px 30px;
      display: inline-block;
      vertical-align: middle;
    }

    .ele-exception-img {
      img {
        width: 216px;
        height: auto;
      }

      .ele-exception-icon {
        font-size: 220px;
      }
    }

    .ele-exception-content > h1 {
      font-size: 72px;
      font-weight: 600;
      margin: 0 0 20px 0;
    }

    .ele-exception-content > p {
      font-size: 20px;
      margin: 0 0 25px 0;
    }
  }

  @media screen and (max-width: 768px) {
    .ele-exception {
      margin: 40px 0;

      .ele-exception-img {
        margin: 0;

        img {
          max-height: 200px;
          max-width: 100%;
        }
      }

      .ele-exception-content {
        text-align: center;
      }
    }
  }
</style>
